<template>
  <!--  我的地址-->
  <div class="address" :style="{ paddingTop: capsuleTop + 'px' }">
    <Return />

    <!-- 地址列表 -->
    <scroll-view v-if="!showAddForm" class="address-content" scroll-y="true" :style="{ height: contentHeight + 'px' }">
      <template v-for="(item, index) in addressList" :key="item.id">
        <div class="address-content-item" @click.stop="handlerItem(item)">
          <div class="address-content-item-header">
            <div class="logo-zi">{{ getFirstChar(item.contactName) }}</div>
            <div class="header-content">
              <div class="header-content-top">
                <div>{{ item.contactName }}</div>
                <div>{{ item.contactPhone }}</div>
              </div>
              <div>{{ item.contactAddress }}</div>
            </div>
            <div @click.stop="editAddress(item)" class="edit-btn">修改</div>
          </div>
          <div class="page-line"> </div>
          <div class="address-content-item-footer">
            <wd-checkbox v-model="item.isDefaultAddress" @change.stop="(e) => handleDefaultChange(e, item)">
              <div>默认地址</div>
            </wd-checkbox>
            <div class="right">
              <div @click.stop="deleteAddress(item)" class="delete-btn">删除</div>
            </div>
          </div>
        </div>
      </template>

      <!-- 空状态 -->
      <div v-if="addressList.length === 0 && !loading" class="empty-state">
        <div class="empty-icon"></div>
        <div class="empty-text">暂无地址</div>
        <div class="empty-desc">点击下方按钮添加地址</div>
      </div>
    </scroll-view>

    <!-- 添加/编辑地址表单 -->
    <div class="add-address" v-if="showAddForm">
      <div class="add-address-title">
        <div class="add-address-title-text">
          <span class="iconfont icon-edit"></span>
          {{ isEditing ? '编辑地址' : '添加地址' }}
        </div>
        <wd-checkbox v-model="formData.isDefault" @change="handleFormDefaultChange">
          <div class="title-checkbox">默认地址</div>
        </wd-checkbox>
      </div>
      <div class="add-address-content">
        <div class="add-address-content-item">
          <label class="feedback-label" for="contactName">联系人</label>
          <input id="contactName" class="feedback-input" type="text" placeholder="请输入联系人姓名"
            v-model="formData.contactName" maxlength="20">
        </div>
        <div class="add-address-content-item">
          <label class="feedback-label" for="contactPhone">手机号码</label>
          <input id="contactPhone" class="feedback-input" type="number" placeholder="请输入手机号码"
            v-model="formData.contactPhone" maxlength="11">
        </div>
        <div class="add-address-content-item">
          <label class="feedback-label">所在区域</label>
          <picker class="feedback-input picker-input" :range="regionOptions" range-key="label"
            @change="handleRegionChange">
            <view class="picker-text">
              {{ getRegionName(formData.region) || '请选择所在区域' }}
            </view>
          </picker>
        </div>
        <div class="add-address-content-item">
          <label class="feedback-label">楼栋</label>
          <picker class="feedback-input picker-input" :range="buildingOptions" range-key="label"
            @change="handleBuildingChange">
            <view class="picker-text">
              {{ getBuildingName(formData.building) || '请选择楼栋' }}
            </view>
          </picker>
        </div>
        <div class="add-address-content-item">
          <label class="feedback-label" for="address">详细地址</label>
          <textarea id="address" class="feedback-textarea" placeholder="请输入详细地址" v-model="formData.contactAddress"
            maxlength="100" :style="{ height: '120rpx' }"></textarea>
        </div>
      </div>
      <div class="footer add-footer">
        <button class="footer-btn main-btn" @click="saveAddress">
          {{ isEditing ? '保存修改' : '提交' }}
        </button>
        <button class="footer-title cancel-btn" @click="cancelAdd">取消</button>
      </div>
    </div>

    <!-- 底部操作按钮（只在列表页显示） -->
    <div class="footer" v-if="!showAddForm">
      <div class="footer-title" @click="showManageModal">管理</div>
      <div class="footer-btn" @click="showAdd">添加地址</div>
    </div>

    <!-- 管理弹窗 -->
    <wd-popup v-model="showManage" position="bottom" :style="{ height: '300rpx' }">
      <div class="manage-popup">
        <div class="manage-title">管理地址</div>
        <div class="manage-options">
          <div class="manage-option" @click="batchDelete">
            <div class="option-icon">🗑️</div>
            <div class="option-text">批量删除</div>
          </div>
        </div>
        <div class="manage-cancel" @click="showManage = false">取消</div>
      </div>
    </wd-popup>

    <!-- 确认删除弹窗 -->
    <wd-popup v-model="showDeleteConfirm" position="center" :style="{ width: '600rpx' }">
      <div class="delete-confirm">
        <div class="delete-title">确认删除</div>
        <div class="delete-content">确定要删除这个地址吗？删除后无法恢复。</div>
        <div class="delete-actions">
          <div class="delete-cancel" @click="showDeleteConfirm = false">取消</div>
          <div class="delete-confirm-btn" @click="confirmDelete">确认删除</div>
        </div>
      </div>
    </wd-popup>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { Fetch } from '@/composables/useFetch'
import Return from '@/components/Return.vue'
// 获取用户数据
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
// 响应式数据
const capsuleTop = ref(0)
const contentHeight = ref(0)
const addressList = ref([])
const showAddForm = ref(false)
const isEditing = ref(false)
const showManage = ref(false)
const showDeleteConfirm = ref(false)
const currentDeleteItem = ref(null)
const loading = ref(false)
const isReturn = ref(false)  // 是否单击地址选择返回



onLoad((options) => {

  if (options.isReturn) {
    isReturn.value = true
  }
})

onShow(async () => {
  // 确保基础数据先加载完成
  await Promise.all([
    getAddressList(),
    getGirlsBuildingList(),
    getMaleBuildingList(),
    getTeachersBuildingList()
  ])
})
const defaultAddress = ((item) => {
  return item.defaultAddress == 1
})

const handlerItem = (item) => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];

  // 获取 eventChannel
  if (currentPage.$scope && currentPage.$scope.getOpenerEventChannel) {
    // 微信小程序方式
    const eventChannel = currentPage.$scope.getOpenerEventChannel();
    eventChannel.emit('selectAddress', item);
  } else {
    // uni-app 通用方式
    uni.$emit('selectAddress', item);
  }

  // 关闭当前页面
  if (isReturn.value) {
    uni.navigateBack();
  }

}

// 表单数据
const formData = reactive({
  id: null,
  contactName: '',
  contactPhone: '',
  region: 0,
  building: 0, // 添加building字段
  contactAddress: '',
  isDefault: false
})

console.log(userStore.user, 'useUserStore用户信息');

// 区域选项 - 只保留男寝和女寝
const regionOptions = ref([
])
// 楼栋选项
const buildingOptions = ref([
  { label: '8d栋', value: 0 },
  { label: '10d栋', value: 1 },
  { label: 'A6栋', value: 2 },
  { label: 'B3栋', value: 3 }
])
// 女生楼栋选项
const girlsBuildingOptions = ref([
])

// 男寝楼栋选项
const maleBuildingOptions = ref([
])

// 老师楼栋选项
const teachersBuildingOptions = ref([
])


// 计算属性
const getFirstChar = (name) => {
  return name ? name.charAt(0) : '地'
}

const getRegionName = (value) => {
  const item = regionOptions.value.find(opt => opt.value === value)
  return item ? item.label : ''
}

const getBuildingName = (building) => {
  if (!formData.region || formData.region === 0) {
    return '请先选择所在区域'
  }
  if (!building || building === 0) {
    return '请选择楼栋'
  }
  const option = buildingOptions.value.find(item => item.value == building)
  return option ? option.label : '未知楼栋'
}

// 生命周期
onMounted(() => {
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
  capsuleTop.value = menuButtonInfo.bottom + 20
  contentHeight.value = wx.getSystemInfoSync().windowHeight - menuButtonInfo.bottom - 113
  loadAddressList()
})

// 获取用户地址数据列表    获取列表数据
const loadAddressList = async () => {
  try {
    loading.value = true
    const { status, data } = await Fetch(`shopping/address/list`, { method: 'get' })
    console.log(status, data);

    if (status === 200 && data.code === 200) {
      data.rows.forEach(item => {
        item.isDefaultAddress = defaultAddress(item)
      })
      addressList.value = data.rows || []
      if (addressList.value.length == 1) {
        const { status, data } = await Fetch('shopping/address/edit', {
          method: 'put',
          data: { addressId: addressList.value[0].addressId, defaultAddress: "1" },
        })
        if (status === 200 && data.code === 200) {

          addressList.value[0].isDefaultAddress = true
        }
      }
    }
  } catch (error) {
    console.error('加载地址列表失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

// 获取男寝和女寝数据
const getAddressList = async () => {
  const { data } = await Fetch('shopping/dict/data/type/men_and_women', { method: 'get' })
  if (data.code === 200) {

    regionOptions.value = data.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue
    }))
    console.log(regionOptions, 'regionOptions');

  }
}

// 女生楼栋数
const getGirlsBuildingList = async () => {
  const { data } = await Fetch('shopping/dict/data/type/girls_building', { method: 'get' })
  if (data.code === 200) {

    girlsBuildingOptions.value = data.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue
    }))
    console.log(girlsBuildingOptions, 'girlsBuildingOptions');

  }
}

// 获取男寝数据
const getMaleBuildingList = async () => {
  const { data } = await Fetch('shopping/dict/data/type/male_building', { method: 'get' })
  if (data.code === 200) {

    maleBuildingOptions.value = data.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue
    }))
    console.log(maleBuildingOptions, 'maleBuildingOptions');

  }
}

// 获取老师楼栋数据
const getTeachersBuildingList = async () => {
  const { data } = await Fetch('shopping/dict/data/type/teachers_building', { method: 'get' })
  if (data.code === 200) {

    teachersBuildingOptions.value = data.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue
    }))
    console.log(teachersBuildingOptions, 'teachersBuildingOptions');

  }
}


const resetForm = () => {
  formData.id = null
  formData.contactName = ''
  formData.contactPhone = ''
  formData.region = 0
  formData.building = 0 // 重置building
  formData.contactAddress = ''
  formData.isDefault = false
  isEditing.value = false

  // 重置楼栋选项为空
  buildingOptions.value = []
}

const validateForm = () => {
  if (!formData.contactName.trim()) {
    uni.showToast({
      title: '请输入联系人姓名',
      icon: 'none'
    })
    return false
  }
  if (!formData.contactPhone.trim()) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none'
    })
    return false
  }
  if (!/^1[3-9]\d{9}$/.test(formData.contactPhone)) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    })
    return false
  }
  if (!formData.contactAddress.trim()) {
    uni.showToast({
      title: '请输入详细地址',
      icon: 'none'
    })
    return false
  }
  if (!formData.region || formData.region === 0) {
    uni.showToast({ title: '请选择所在区域', icon: 'none' })
    return false
  }

  if (!formData.building || formData.building === 0) {
    uni.showToast({ title: '请选择楼栋', icon: 'none' })
    return false
  }

  return true
}

const saveAddress = async () => {
  if (!validateForm()) return

  try {
    loading.value = true
    const url = isEditing.value ? 'shopping/address/edit' : 'shopping/address/add'
    const method = isEditing.value ? 'put' : 'post'
    const userAddress = []
    regionOptions.value.forEach(item => {
      if (item.value == formData.region) {
        userAddress.push(item.label)
      }
    })

    buildingOptions.value.forEach(item => {
      if (item.value == formData.building) {
        userAddress.push(item.label)
      }
    })
    userAddress.push(formData.contactAddress)
    formData.contactAddress = userAddress.join('-')
    formData.customerId = userStore.user.customerId
    const { status, data } = await Fetch(url, {
      method,
      data: formData
    })

    if (status === 200 && data.code === 200) {
      uni.showToast({
        title: isEditing.value ? '修改成功' : '添加成功',
        icon: 'success'
      })
      if (addressList.value.length > 0) {

      }
      loadAddressList()
      resetForm()
      showAddForm.value = false
    } else {
      uni.showToast({
        title: data.msg || '操作失败',
        icon: 'error'
      })
    }
  } catch (error) {
    console.error('保存地址失败:', error)
    uni.showToast({
      title: '操作失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

const editAddress = async (item) => {
  isEditing.value = true

  // 解析地址字符串
  const addressParts = item.contactAddress.split('-')
  const regionName = addressParts[0] || ''
  const buildingName = addressParts[1] || ''
  const detailAddress = addressParts[2] || ''

  // 根据名称找到对应的值
  const regionValue = regionOptions.value.find(opt => opt.label === regionName)?.value || 0

  // 先更新楼栋选项
  await updateBuildingOptions(regionValue)

  console.log(buildingOptions,'buildingOptions');

  // 然后找到楼栋值
  const buildingValue = buildingOptions.value.find(opt => opt.label === buildingName)?.value || 0

  // 设置表单数据
  Object.assign(formData, {
    ...item,
    region: regionValue,
    building: buildingValue,
    contactAddress: detailAddress  // 只保留详细地址部分
  })

  showAddForm.value = true
}

const deleteAddress = async (item) => {
  currentDeleteItem.value = item
  const { status, data } = await Fetch(`shopping/address/${item.addressId}`, {
    method: 'delete',
  })
  if (status === 200 && data.code === 200) {
    uni.showToast({
      title: '删除成功',
      icon: 'success'
    })
    loadAddressList()
  }
}

const confirmDelete = async () => {
  if (!currentDeleteItem.value) return

  try {
    loading.value = true
    const { status, data } = await Fetch(`shopping/address/${currentDeleteItem.value.addressId}`, {
      method: 'delete',
    })

    if (status === 200 && data.code === 200) {
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      })
      loadAddressList()
    } else {
      uni.showToast({
        title: data.msg || '删除失败',
        icon: 'error'
      })
    }
  } catch (error) {
    console.error('删除地址失败:', error)
    uni.showToast({
      title: '删除失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
    showDeleteConfirm.value = false
    currentDeleteItem.value = null
  }
}

const handleDefaultChange = async (e, item) => {
  try {
    const { status, data } = await Fetch('shopping/address/edit', {
      method: 'put',
      data: { addressId: item.addressId, defaultAddress: e.value ? "1" : '0' },
    })

    if (status === 200 && data.code === 200) {
      // 更新本地数据
      addressList.value.forEach(address => {
        address.isDefault = address.id === item.id ? e : false
      })
      uni.showToast({
        title: e ? '已设为默认' : '已取消默认',
        icon: 'success'
      })
      loadAddressList()
    } else {
      // 恢复原状态
      item.isDefault = !e
      uni.showToast({
        title: data.msg || '操作失败',
        icon: 'error'
      })
    }
  } catch (error) {
    console.error('设置默认地址失败:', error)
    item.isDefault = !e
    uni.showToast({
      title: '操作失败',
      icon: 'error'
    })
  }
}

const handleFormDefaultChange = (e) => {
  console.log('复选框状态变化:', e) // 添加调试日志
  formData.isDefault = e.value
}

const handleRegionChange = (e) => {
  const index = e.detail.value
  const selectedRegion = regionOptions.value[index]
  formData.region = selectedRegion.value

  // 重置楼栋选择
  formData.building = 0

  // 根据区域值更新楼栋选项
  updateBuildingOptions(selectedRegion.value)
}

// 新增：更新楼栋选项的方法
const updateBuildingOptions = (regionValue) => {
  // 确保类型一致
  const regionStr = String(regionValue)
  formData.building = 0 // 重置楼栋选择

  switch (regionStr) {
    case '1':
      buildingOptions.value = [...maleBuildingOptions.value]
      break
    case '2':
      buildingOptions.value = [...girlsBuildingOptions.value]
      break
    case '3':
      buildingOptions.value = [...teachersBuildingOptions.value]
      break
    default:
      buildingOptions.value = []
      break
  }
}

const handleBuildingChange = (e) => {
  const index = e.detail.value
  const selectedRegion = buildingOptions.value[index]
  formData.building = selectedRegion.value
}

const showManageModal = () => {
  showManage.value = true
}

const batchDelete = () => {
  showManage.value = false
  uni.showModal({
    title: '批量删除',
    content: '确定要删除所有地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          loading.value = true

          // 循环删除所有地址
          for (let i = 0; i < addressList.value.length; i++) {
            const item = addressList.value[i]
            await Fetch(`shopping/address/${item.addressId}`, {
              method: 'delete'
            })
          }

          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })

          // 重新加载地址列表
          loadAddressList()

        } catch (error) {
          console.error('批量删除失败:', error)
          uni.showToast({
            title: '删除失败',
            icon: 'error'
          })
        } finally {
          loading.value = false
        }
      }
    }
  })
}

// 新增/编辑切换
const showAdd = () => {
  resetForm()
  showAddForm.value = true
  isEditing.value = false
}

const cancelAdd = () => {
  showAddForm.value = false
  resetForm()
}
</script>

<style lang="scss">
page {
  background: #F5F5F5;
}

.address {
  .address-content {
    padding-bottom: 20rpx;

    .address-content-item {
      width: 672rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 46rpx 24rpx 26rpx;
      box-sizing: border-box;
      margin: 0 auto 20rpx;

      .address-content-item-header {
        display: flex;
        align-items: center;

        .logo-zi {
          width: 70rpx;
          height: 70rpx;
          background: #FDF8F1;
          font-weight: bold;
          font-size: 30rpx;
          color: #E68932;
          line-height: 70rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-right: 20rpx;
          border-radius: 50%;
        }

        .header-content {
          margin-right: auto;
          color: #999999;
          font-size: 24rpx;

          .header-content-top {
            display: flex;
            align-items: center;
            color: #111111;
            margin-bottom: 10rpx;

            view {
              &:nth-child(1) {
                font-size: 28rpx;
                font-weight: bold;
                margin-right: 10rpx;
              }

              &:nth-child(2) {
                font-size: 24rpx;
              }
            }
          }
        }

        .edit-btn {
          font-size: 24rpx;
          color: #007AFF;
          padding: 10rpx;
        }
      }

      .page-line {
        width: 100%;
        height: 2rpx;
        background: #F1F1F2;
        margin: 44rpx 0;
      }

      .address-content-item-footer {
        display: flex;
        align-items: center;

        .right {
          margin-left: auto;
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;

          .delete-btn {
            color: #FF3B30;
            padding: 10rpx;
          }
        }
      }
    }
  }


  .add-address {
    width: 670rpx;
    background: #fff;
    border-radius: 24rpx;
    margin: 0 auto;
    padding: 40rpx 32rpx 24rpx 32rpx;
    box-sizing: border-box;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);

    .add-address-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
      font-size: 36rpx;
      color: #222;
      margin-bottom: 48rpx;

      .add-address-title-text {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        color: #222;

        .iconfont {
          font-size: 32rpx;
          color: #fbe050;
          margin-right: 12rpx;
        }
      }

      .title-checkbox {
        font-weight: 400;
        font-size: 26rpx;
        color: #999;
        margin-left: 12rpx;
      }
    }

    .add-address-content {
      .add-address-content-item {
        display: flex;
        align-items: center;
        margin-bottom: 36rpx;

        .feedback-label {
          font-size: 28rpx;
          color: #333;
          width: 120rpx;
          text-align: left;
          font-weight: 500;
          margin-right: 16rpx;
        }

        .feedback-input {
          flex: 1;
          height: 80rpx;
          padding: 0 28rpx;
          border: 1rpx solid #e5e5e5;
          border-radius: 16rpx;
          background: #f8f8f8;
          font-size: 26rpx;
          color: #222;
          transition: border 0.2s;
          outline: none;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

          &:focus {
            border: 1rpx solid #fbe050;
            background: #fffbe6;
          }

          &.picker-input {
            display: flex;
            align-items: center;
            padding: 0;

            .picker-text {
              flex: 1;
              width: 400rpx;
              height: 80rpx;
              padding: 0 28rpx;
              display: flex;
              align-items: center;
              font-size: 26rpx;
              color: #222;

              &:empty::before {
                content: '请选择所在区域';
                color: #999;
              }
            }
          }
        }

        .feedback-textarea {
          flex: 1;
          min-height: 80rpx;
          padding: 16rpx 28rpx;
          border: 1rpx solid #e5e5e5;
          border-radius: 16rpx;
          background: #f8f8f8;
          font-size: 26rpx;
          color: #222;
          transition: border 0.2s;
          outline: none;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

          &:focus {
            border: 1rpx solid #fbe050;
            background: #fffbe6;
          }
        }
      }
    }

    .add-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 32rpx;

      .main-btn {
        width: 60%;
        height: 88rpx;
        background: linear-gradient(90deg, #ffe259 0%, #ffa751 100%);
        color: #222;
        font-size: 30rpx;
        font-weight: bold;
        border: none;
        border-radius: 44rpx;
        box-shadow: 0 4rpx 16rpx rgba(255, 224, 80, 0.15);
        transition: background 0.2s;

        &:active {
          background: #ffd700;
        }
      }

      .cancel-btn {
        width: 36%;
        height: 88rpx;
        background: #f5f5f5;
        color: #888;
        font-size: 30rpx;
        border: none;
        border-radius: 44rpx;
        margin-left: 24rpx;
        font-weight: 500;
        transition: background 0.2s;

        &:active {
          background: #e0e0e0;
        }
      }
    }
  }

  .footer {
    height: 136rpx;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    text-align: center;
    font-style: normal;
    text-transform: none;
    line-height: 84rpx;
    padding: 20rpx 40rpx 0;
    box-sizing: border-box;
    z-index: 10;

    .footer-title {
      width: 184rpx;
      height: 84rpx;
      background: #F7F7F7;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-btn {
      width: 462rpx;
      height: 84rpx;
      background: #FBE050;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 100rpx 0 40rpx 0;

    .empty-icon {
      font-size: 80rpx;
      margin-bottom: 20rpx;
    }

    .empty-text {
      font-size: 32rpx;
      color: #999;
      margin-bottom: 10rpx;
    }

    .empty-desc {
      font-size: 24rpx;
      color: #bbb;
    }
  }
}

/* 管理弹窗样式 */
.manage-popup {
  padding: 40rpx 30rpx;

  .manage-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .manage-options {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;

    .manage-option {
      display: flex;
      flex-direction: column;
      align-items: center;

      .option-icon {
        font-size: 40rpx;
        margin-bottom: 10rpx;
      }

      .option-text {
        font-size: 28rpx;
      }
    }
  }

  .manage-cancel {
    text-align: center;
    color: #007AFF;
    font-size: 28rpx;
    margin-top: 20rpx;
  }
}

/* 删除确认弹窗样式 */
.delete-confirm {
  padding: 40rpx 30rpx;

  .delete-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .delete-content {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
    text-align: center;
  }

  .delete-actions {
    display: flex;
    justify-content: space-between;

    .delete-cancel,
    .delete-confirm-btn {
      width: 45%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 35rpx;
      font-size: 28rpx;
    }

    .delete-cancel {
      background: #f5f5f5;
      color: #333;
    }

    .delete-confirm-btn {
      background: #FF3B30;
      color: #fff;
    }
  }
}

::v-deep {
  .wd-upload {
    margin-top: 30rpx;
  }

  .wd-input {
    &::after {
      display: none !important;
    }

    .wd-input__inner {
      text-align: right;
      font-size: 28rpx;
      color: #999999;
    }
  }
}
</style>
